<template>
  <div class="dataBase">
    <ContentWrap>
      <el-form label-width="100px" ref="searchRef" :model="queryParams">
        <el-row>
          <el-col :span="6">
            <el-form-item label="分类名称" prop="cnName">
              <ns-input v-model="queryParams.cnName" clearable placeholder="请输入分类名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类描述" prop="description">
              <ns-input v-model="queryParams.description" clearable placeholder="请输入分类描述" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="等级" prop="levelCode">
              <el-select v-model="queryParams.levelCode" clearable placeholder="请选择等级">
                <el-option
                  v-for="(level, levelIndex) in levelList"
                  :key="levelIndex"
                  :label="level.levelName"
                  :value="level.levelCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="text-right">
            <el-button @click="searchReset" plain>重置</el-button>
            <el-button @click="search" plain>搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <el-form-item>
        <el-button type="primary" @click="addClassification">添加分类</el-button>
        <el-button plain @click="toggleExpandAll"> 展开/折叠</el-button>
      </el-form-item>
      <el-table
        v-if="refreshTable"
        v-loading="loading"
        :data="list"
        :default-expand-all="isExpandAll"
        row-key="id"
      >
        <el-table-column :show-overflow-tooltip="true" label="分类名称" prop="cnName" width="250" />
        <el-table-column :show-overflow-tooltip="true" label="分类描述" prop="description" />
        <el-table-column label="等级" prop="levelName" />
        <el-table-column :show-overflow-tooltip="true" label="绑定策略" prop="strategyName" />
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="addClassification(scope.row, 'edit')">
              编辑
            </el-button>
            <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
  </div>
</template>

<script setup lang="tsx">
import * as ClassificationApi from '@/api/dataStandards/classification'
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
import { levelPage } from '@/api/strategyManage/level/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const message = useMessage() // 消息弹窗
const route = useRoute()
const { t } = useI18n() // 国际化
const searchRef = ref()
const isExpandAll = ref(false)
const refreshTable = ref(true)
const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据
const queryParams = ref({
  cnName: '',
  description: '',
  levelCode: ''
})

/** 展开/折叠操作 */
const toggleExpandAll = () => {
  refreshTable.value = false
  isExpandAll.value = !isExpandAll.value
  nextTick(() => {
    refreshTable.value = true
  })
}

const searchReset = () => {
  searchRef.value.resetFields()
  search()
}

const allSelect = ref(false)

const search = () => {
  getList()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ClassificationApi.classificationTree({
      ...queryParams.value,
      standardId: route.query.id
    })
    console.log('data', data)
    list.value = data
    // list.value = handleTree(data)
  } finally {
    loading.value = false
  }
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ClassificationApi.classificationDelete(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

const addClassification = (row, type) => {
  proxy?.$Drawer({
    params: {
      ...row,
      callBack: () => {
        searchReset()
      }
    },
    title: type == 'edit' ? '编辑类别' : `新增类别`,
    size: '40%',
    component: import('./components/ClassificationForm.vue')
  })
}
const levelList = ref([])
const getLevelList = async () => {
  const { data } = await levelPage({ page: 1, pageSize: 999 })
  console.log('data', data)
  levelList.value = data
}

onMounted(() => {
  getList()
  getLevelList()
})
</script>

<style lang="scss">
.dataBase {
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: inline-flex;
    align-items: center;
    line-height: 23px;
    padding-left: 12px;
  }
  .el-form .el-select {
    width: 100%;
  }
  :deep(.hide-expand .cell) {
    display: none;
  }
  :deep(.el-form .el-cascader) {
    width: 100%;
  }
  :deep(.operate-btn .el-button.is-text) {
    padding: 0 10px 0 0;
  }
  .el-dropdown-link:focus {
    outline: none;
  }
}
</style>
